<template>
  <div class="pages inventorystatistics">
    <div class="pageLevel">
      <!-- 搜索框 -->
      <div class="tableSearch">
        <el-form>
          <el-row>
            <el-col :span="6">
              <el-form-item label="商户:" label-width="100px">
                <el-input
                  class="input"
                  clearable
                  :disabled="true"
                  v-model="selectdata.merchant"
                  size="small"
                  placeholder="输入商户编号/名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="仓库:" label-width="100px">
                <el-select
                  filterable
                  size="small"
                  style="width:190px"
                  v-model="selectdata.warehouse"
                  placeholder="全部"
                >
                  <el-option
                    v-for="(item,index) in warehouseLists"
                    :key="index"
                    :label="item.repositoryName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label label-width="100px">
                <el-button type="primary" size="mini" @click="searchSelect" class="Button">查询</el-button>
              </el-form-item>
              <el-form-item label label-width="10px">
                <el-button
                  type="primary"
                  v-if="setRole('导出')"
                  size="mini"
                  class="Button"
                  @click="download"
                >导出</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="开始时间:" label-width="100px" class="billdata">
                <el-date-picker
                  class="delete"
                  style="width:190px"
                  value-format="yyyy-MM-dd"
                  size="small"
                  v-model="selectdata.timeStart"
                  type="date"
                  placeholder="选择日期"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="结束时间:" label-width="100px" class="billdata">
                <el-date-picker
                  class="delete"
                  style="width:190px"
                  value-format="yyyy-MM-dd"
                  size="small"
                  v-model="selectdata.timeEnd"
                  type="date"
                  placeholder="选择日期"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="商品条码:" label-width="100px">
                <el-input
                  class="input"
                  clearable
                  v-model="selectdata.barCode"
                  size="small"
                  placeholder="输入商品条码"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商品货号:" label-width="100px">
                <el-input
                  class="input"
                  clearable
                  v-model="selectdata.goodsCode"
                  size="small"
                  placeholder="输入商品货号"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商品分类:" label-width="100px">
                <el-cascader
                  size="small"
                  style="width:190px"
                  change-on-select
                  expand-trigger="hover"
                  :options="commodityCategoryfunList"
                  v-model="selectdata.commodityCategory"
                ></el-cascader>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="商品批次:" label-width="100px">
                <el-input
                  class="input"
                  clearable
                  v-model="selectdata.commoditybatches"
                  size="small"
                  placeholder="输入商品批次"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商品名称:" label-width="100px">
                <el-input
                  class="input"
                  clearable
                  v-model="selectdata.tradeName"
                  size="small"
                  placeholder="输入商品名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商品品牌:" label-width="100px">
                <el-select
                  size="small"
                  filterable
                  style="width:190px"
                  v-model="selectdata.commodityBrand"
                  placeholder="请先选择商品品牌"
                >
                  <el-option
                    v-for="(item,index) in commodityBrandList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="tableMain">
        <el-table
          :data="qutboundStatisticsList"
          stripe
          style="width: 100%"
          show-summary
          :summary-method="getSummaries"
        >
          <el-table-column type="index" width="55" label="序号"></el-table-column>
          <el-table-column prop="shopName" label="商户名称" align="center" width="100"></el-table-column>
          <el-table-column
            prop="createTime"
            label="盘点日期"
            :formatter="createTime"
            align="center"
            width="100"
          ></el-table-column>
          <el-table-column prop="barCode" label="商品条码" align="center"></el-table-column>
          <el-table-column prop="goodsCode" label="商品货号" align="center"></el-table-column>
          <el-table-column prop="goodsName" label="商品名称" align="center"></el-table-column>
          <el-table-column prop="goodsBatchNumber" label="批次" align="center"></el-table-column>
          <el-table-column prop="goodsSpec" label="商品规格" align="center" width="150">
            <template slot-scope="scope">
              <div v-for="(item,index) in scope.row.goodsSpec" :key="index">
                <span v-if="item!=null">{{item.paramName}} :</span>
                <span v-if="item!=null">{{item.paramValue}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="primaryClassifyName" label="商品分类" align="center" width="150"></el-table-column>
          <el-table-column prop="brand" label="商品品牌" align="center"></el-table-column>
          <el-table-column prop="warehouseName" label="仓库" align="center"></el-table-column>
          <el-table-column prop="goodsUnitName" label="库存单位" align="center"></el-table-column>
          <el-table-column prop="qutgoingQuantity" label="理论结存" align="center">
            <el-table-column prop="skuNum" label="数量" align="center"></el-table-column>
            <el-table-column prop="skuAmount" label="金额" align="center"></el-table-column>
          </el-table-column>
          <el-table-column prop="goodsNum" label="盘点" align="center">
            <el-table-column prop="goodsNum" label="数量" align="center"></el-table-column>
            <el-table-column prop="goodsAmount" label="金额" align="center"></el-table-column>
          </el-table-column>
          <el-table-column prop="palNum" label="盈亏" align="center">
            <el-table-column prop="palNum" label="数量" align="center"></el-table-column>
            <el-table-column prop="palAmount" label="金额" align="center"></el-table-column>
          </el-table-column>
          <el-table-column prop="operater" label="盘点人" align="center"></el-table-column>
        </el-table>
        <!-- 页码 -->
        <div class="pageblock">
          <el-button size="small" type="primary" class="topage" @click="toPage">确定</el-button>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10,20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalItems"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import util from "@/util";
import {
  getRepositoryListPage,
  listRepertoryGoodsInventoryInfos,
  getGoodsClassifyTreeList,
  getGoodsLabelListByShopId,
  listRepertoryGoodsInventoryInfosExport
} from "@/api";
var fileDownload = require("js-file-download");
export default {
  computed: mapState(["merchantId", "power", "companyName"]),
  data() {
    return {
      selectdata: {
        merchant: "", //商户
        warehouse: "", //仓库
        outgoingtype: "", //出库单位
        timeStart: "", //开始时间
        timeEnd: "", //结束时间
        barCode: "", //商品条码
        goodsCode: "", //商品货号
        commodityCategory: [""], //商品分类
        commoditybatches: "", //商品批次
        tradeName: "", //商品名称
        commodityBrand: "" //商品品牌
      },
      qutboundStatisticsList: [],
      //   分页
      pageSize: 10,
      totalItems: 0,
      currentPage: 1,
      skuNumAll: "",
      skuAmountAll: "",
      goodsNumAll: "",
      goodsAmountAll: "",
      palNumAll: "",
      palAmountAll: "",
      warehouseLists: [], //仓库下拉
      outgoingtypeList: [
        {
          id: "",
          name: "全部"
        },
        {
          id: "0",
          name: "其它出库"
        },
        {
          id: "2",
          name: "盘亏出库"
        },
        {
          id: "1",
          name: "销售出库"
        },
        {
          id: "5",
          name: "报损出库"
        },
        {
          id: "3",
          name: "调拨出库"
        }
      ], //出库类型
      commodityCategoryfunList: [], //商品品类数组
      commodityBrandList: [], //商品品牌数组
      shopPullDownList: [], //店铺下拉
      exportData: {}
    };
  },
  created() {},
  mounted() {
    this.warehouseList();
    this.commodityCategoryfun();
    this.commodityBrand();
    this.init();
  },
  methods: {
    //转时间戳
    createTime(row, column) {
      return util.foryear(row.createTime);
    },
    init() {
      this.selectdata.merchant = this.companyName;
    },
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    // 获取表格数据
    tableget(pageSize, pageNum) {
      let primaryClassifyId =
        this.selectdata.commodityCategory[
          this.selectdata.commodityCategory.length - 1
        ] || "";
      let dailySales = {
        // shopId:this.merchantId,
        shopLabel: this.merchantId,
        warehouseId: this.selectdata.warehouse,
        startTime: this.selectdata.timeStart,
        endTime: this.selectdata.timeEnd + " " + "23" + ":" + "59" + ":" + "59",
        barCode: this.selectdata.barCode,
        goodsBatchNumber: this.selectdata.commoditybatches,
        goodsCode: this.selectdata.goodsCode,
        goodsName: this.selectdata.tradeName,
        goodsLabelId: this.selectdata.commodityBrand,
        primaryClassifyId: primaryClassifyId,
        pageNum: pageNum,
        pageSize: pageSize
      };
      if (this.selectdata.timeStart == "") {
        this.$message({
          type: "error",
          message: "请选择开始日期"
        });
      } else if (this.selectdata.timeEnd == "") {
        this.$message({
          type: "error",
          message: "请选结束日期"
        });
      } else if (this.selectdata.timeStart > this.selectdata.timeEnd) {
        this.$message({
          type: "error",
          message: "请确定开始日期小于或等于结束日期"
        });
      } else {
        this.exportData = dailySales;
        listRepertoryGoodsInventoryInfos(dailySales).then(res => {
          this.qutboundStatisticsList = res.data.list;
          this.totalItems = res.data.pageTotal;
          this.skuNumAll = res.data.skuNumAll; //汇总数据
          this.skuAmountAll = res.data.skuAmountAll; //汇总数据
          this.goodsNumAll = res.data.goodsNumAll; //汇总数据
          this.goodsAmountAll = res.data.goodsAmountAll; //汇总数据
          this.palNumAll = res.data.palNumAll; //汇总数据
          this.palAmountAll = res.data.palAmountAll; //汇总数据
        });
      }
    },

    // 搜索
    searchSelect() {
      this.currentPage = 1;
      this.tableget(this.pageSize, this.currentPage);
    },
    //跳页
    toPage() {
      this.currentPage = 1;
      this.tableget(this.pageSize, this.currentPage);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.tableget(val, this.currentPage);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.tableget(this.pageSize, val);
    },
    // 仓库列表
    warehouseList() {
      getRepositoryListPage({
        shopId: this.merchantId
      }).then(res => {
        let a = {
          id: "",
          repositoryName: "全部"
        };
        res.data.list.unshift(a);
        this.warehouseLists = res.data.list;
      });
    },
    // 商品品类
    commodityCategoryfun() {
      getGoodsClassifyTreeList().then(res => {
        let a = {
          value: "",
          label: "全部"
        };
        res.data.unshift(a);
        this.commodityCategoryfunList = res.data;
      });
    },
    // 商品品牌
    commodityBrand() {
      getGoodsLabelListByShopId({
        labelType: "0",
        shopId: this.merchantId
      }).then(res => {
        let a = {
          id: "",
          name: "全部"
        };
        res.data.list.unshift(a);
        this.commodityBrandList = res.data.list;
      });
    },
    // 导出
    download(pageSize, pageNum) {
      if (this.qutboundStatisticsList.length == "0") {
        this.$message.error("数据为空不能导出");
      } else {
        listRepertoryGoodsInventoryInfosExport(this.exportData).then(res => {
          let fileName = "盘点统计表.xlsx";
          fileDownload(res, fileName);
        });
      }
    },
    // 合计下面那一列
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "汇总";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        sums[12] = this.skuNumAll;
        sums[13] = this.skuAmountAll;
        sums[14] = this.goodsNumAll;
        sums[15] = this.goodsAmountAll;
        sums[16] = this.palNumAll;
        sums[17] = this.palAmountAll;
      });

      return sums;
    }
  }
};
</script>
<style scoped>
.tableSearch .el-input {
  width: 190px;
}
.tableSearch .el-date-editor {
  width: 350px;
}
</style>
<style>
.inventorystatistics .delete .el-input__suffix {
  display: none;
}
.inventorystatistics .billdata .el-date-editor .el-range__close-icon {
  display: none;
}
.inventorystatistics .el-form-item {
  margin-bottom: 10px;
}
</style>



